<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-对象解构</title>
  </head>
  <body>
    <script>
      // 对象解构
      // 右侧对象的属性值将被赋值给左侧的变量
      // 1. 对象解构赋值基本使用
      const user = {
        username: '周祺',
        age: 81,
        gender: '男'
      }
      // const {username,age,gender} = user
      // console.log(username,age,gender) // 周祺 81 男

      // 注意：
      // 1.1 变量名和属性名必须一致
      // 1.2 如果变量名和属性名不一致，默认为 undefined
      // 1.3 变量名不要和外面的变量名冲突，否则报错

      // 2. 更改解构变量名（重命名）
      // 变量名: 新变量名
    //   const { username: uname, age } = user
    //   console.log(uname) // 周祺
    //   console.log(age) // 81

      // 3. 对象数组解构
      const arr = [
        {
            username:'周祺',
            age: 18
        }
      ]
      const [{username:uname,age}] = arr
      console.log(uname) //  周祺
      console.log(age)   //  18
      
      
    </script>
  </body>
</html>
